<template>
  <section>
    <div>
      <a-tabs default-active-key="cbc" @change="callback"
              :style="{margin: '20px', align: 'center', lineHeight: '700px'}">
        <!--CBC-->
        <a-tab-pane key="cbc" tab="CBC(默认)">
          <div style="background:#ECECEC; padding:30px;">
            <a-card title="CBC模式加解密" :bordered="false" :style="{width: '80%', margin: '5px auto'}">
              <!--左侧框-->
              <div class="left-bar">
                <a-textarea id="cbcPlain"
                            :value="cbc.plain"
                            :rows="16"
                            placeholder="明文"
                            :style="{width: '500px'}"
                            allow-clear @change="onChange"
                />
              </div>
              <!--中间按钮-->
              <div class="center-bar">
                <div class="detail">
                  加密算法
                </div>
                <div class="detail operate-group">
                  <!--加密按钮-->
                  <a-button type="primary">
                    加密<a-icon type="right" />
                  </a-button>
                  <!--解密按钮-->
                  <a-button type="primary">
                    <a-icon type="left" />解密
                  </a-button>
                  <!--保存-->
                  <a-button type="primary" icon="download" :size="size">
                    保存
                  </a-button>
                </div>
              </div>
              <!--右侧框-->
              <div class="right-bar">

              </div>
            </a-card>
          </div>
        </a-tab-pane>

        <!--CFB-->
        <a-tab-pane key="cfb" tab="CFB">
          CFB
        </a-tab-pane>

        <!--OFB-->
        <a-tab-pane key="ofb" tab="OFB">
          OFB
        </a-tab-pane>

        <!--CTR-->
        <a-tab-pane key="ctr" tab="CTR">
          CTR
        </a-tab-pane>

        <!--GCM-->
        <a-tab-pane key="gcm" tab="GCM">
          GCM
        </a-tab-pane>

        <!--ECB-->
        <a-tab-pane key="ecb" tab="ECM(不推荐)">
          ECB
        </a-tab-pane>
      </a-tabs>
    </div>
  </section>
</template>

<script>
export default {
  name: "AES",
  data() {
    return {
      // CBC
      cbc: {
        // 明文
        plain: '',
        // 密钥
        key: '',
        // 密文
        cipher: '',
        // 加密结果
        encryptResult: '',
        // 解密结果
        decryptResult: ''
      },
      // CFB
      cfb: {
        // 明文
        plain: '',
        // 密钥
        key: '',
        // 密文
        cipher: '',
        // 加密结果
        encryptResult: '',
        // 解密结果
        decryptResult: ''
      },
      // OFB
      ofb: {
        // 明文
        plain: '',
        // 密钥
        key: '',
        // 密文
        cipher: '',
        // 加密结果
        encryptResult: '',
        // 解密结果
        decryptResult: ''
      },
      // CTR
      ctr: {
        // 明文
        plain: '',
        // 密钥
        key: '',
        // 密文
        cipher: '',
        // 加密结果
        encryptResult: '',
        // 解密结果
        decryptResult: ''
      },
      // gcm
      gcm: {
        // 明文
        plain: '',
        // 密钥
        key: '',
        // 密文
        cipher: '',
        // 加密结果
        encryptResult: '',
        // 解密结果
        decryptResult: ''
      },
      // ECB
      ecb: {
        // 明文
        plain: '',
        // 密钥
        key: '',
        // 密文
        cipher: '',
        // 加密结果
        encryptResult: '',
        // 解密结果
        decryptResult: ''
      },
    }
  },
  methods: {
    callback(key) {
      console.log(key);
    },
  }
}
</script>

<style scoped>
.left-bar {
  float: left;
}

.center-bar {
  float: left;
  width: 236px;
  text-align: center;
  margin: 30px 5px 0 5px;
}

.right-bar {
  float: right;
}

.detail {
  text-align: left;
  margin-left: 10px;
}

.operate-group {

}

</style>
